<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../js/vue.js"></script>
  <script src="../js/rx.router.js"></script>
  <title>生命周期</title>
</head>

<body>
  <a href="../">返回目录</a>
  <div>
    路由的生命周期：
    <ul>
      <li>创建销毁，使用vue的生命周期</li>
      <li>created : you Vue</li>
      <li>destroyed ：Vue</li>
      <li>显示隐藏，每个组件内定义下面两个函数</li>
      <li>show onRouterShow</li>
      <li>hide onRouterHide</li>
    </ul>
  </div>
  <div id="app">

  </div>
</body>
<script>
  var menus = {
    pagename: 'app',
    component: getComponent('首页'),
    children: [
      {
        name: '页面3',
        pagename: 'page3',
        component: getComponent('页面3'),
        children: [
          {
            name: '页面3-子页面1',
            pagename: 'page3page1',
            component: getComponent('页面1-子页面1'),
          },
          {
            name: '页面3-子页面2',
            pagename: 'page3page2',
            component: getComponent('页面1-子页面2'),
          }
        ]
      }
    ]
  }

  function getComponent(name) {
    return {
      data(){
        return {
          showtTimes:0,
          hideTimes:0
        }
      },
      methods:{
        remove(item){
          this.$rxRouterInfo.removePage(item);
        }
      },
      template: `<div>
        <div>
          <strong>${name}</strong>
          <ul>
            <li v-for="item in $rxRouterInfo.menus" :key="item.pagename" :class="{
              active:$rxRouterInfo.current.pagename===item.pagename
            }"><a :href="'#'+item.path">{{item.name}}</a></li>
          </ul>
          <div>
            显示次数：{{showtTimes}}
          </div>
          <div>
            隐藏次数：{{hideTimes}}
          </div>
        </div>
        <div><strong> 历史记录 </strong>
          <ul>
            <li v-for="(item,index) in $rxRouterInfo.pages" :key="index" :class="{
              active:$rxRouterInfo.current.pagename===item.pagename
            }">
            <a :href="'#'+item.path">{{item.name}}</a><button @click="remove(item)">点我删除，再次打开执行created</button>
            </li>
          </ul>
        </div>
        <component v-for="item in $rxRouterInfo.pages" :is="item.pagename" :key="item.pagename" v-show="$rxRouterInfo.current.pagename===item.pagename" />
      </div>`,
      created(){
        console.log(`${name}创建了`);
        this.onRouterShow=()=>{
          console.log(`${name}显示了`);
          this.showtTimes++
        }
        this.onRouterHide=()=>{
          console.log(`${name}隐藏了`);
          this.hideTimes++
        }
      },
      destroyed(){
        console.log(`${name}销毁了`)
      }
    }
  }
  Vue.prototype.$rxRouter.init(menus)
  new Vue({
    el: '#app',
    template: '<app/>',
    components: {
      app: menus.component
    }
  })

</script>

</html>
